<template>
  <div>
    <el-card shadow="never">
      <el-skeleton :loading="loading" animated>
        <el-row :gutter="16" justify="space-between">
          <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
            <div class="flex items-center h-70px">
              <el-avatar :src="avatar" :size="70" class="mr-16px">
                <img src="@/assets/imgs/avatar.gif" alt="" />
              </el-avatar>
              <div>
                <div class="text-20px">
                  欢迎 “{{ username }}” 又是赚钱的一天
                </div>
                <div class="mt-10px text-14px text-gray-500">
                  今日运势，20℃ - 32℃
                </div>
              </div>
            </div>
          </el-col>
          <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
            <div class="h-70px flex items-center justify-end lt-sm:mt-10px">
              <div>
                <el-button @click="handleSpeak('12345')">播放測試</el-button>
              </div>
              <el-divider direction="vertical" border-style="dashed" />
              <div>
                语音播放开关：
                <span><el-switch v-model="isSpeech" :active-value="true" :inactive-value="false" @change="handleSpeakSwitch" /></span>
              </div>
              <el-divider direction="vertical" border-style="dashed" />
              <div>
                语音大小调整：
                <span><el-input-number :min="0" :max="10" v-model="volumeSize" class="mx-4" @change="handleSpeakVolume" /></span>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-skeleton>
    </el-card>

    <el-card>
      <el-row class="mt-8px" :gutter="8" justify="space-between">
        <el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-8px">
          <el-card shadow="never">
            <el-skeleton :loading="loading" animated>
              <el-row>
                <el-col key="card-today-total"
                        :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
                  <el-card shadow="hover">
                    <div class="flex items-center">
                      <el-icon icon="Phone" :size="25" class="mr-8px" />
                      <span class="text-16px">今日交易金额（元）</span>
                    </div>
                    <div class="mt-16px text-20px text-red-400">{{ statDataMap['todayTotal'] }}</div>
                  </el-card>
                </el-col>
                <el-col key="card-today-success"
                        :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
                  <el-card shadow="hover">
                    <div class="flex items-center">
                      <el-icon icon="Phone" :size="25" class="mr-8px" />
                      <span class="text-16px">今日成功金额（元）</span>
                    </div>
                    <div class="mt-16px text-20px text-red-400">{{ statDataMap['todaySuccess'] }}</div>
                  </el-card>
                </el-col>
                <el-col key="card-today-ratio"
                        :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
                  <el-card shadow="hover">
                    <div class="flex items-center">
                      <el-icon icon="Phone" :size="25" class="mr-8px" />
                      <span class="text-16px">今日成功比例（%）</span>
                    </div>
                    <div class="mt-16px text-20px text-red-400">{{ statDataMap['todaySuccRatio'] }}</div>
                  </el-card>
                </el-col>

                <el-col key="card-yesterday-total"
                        :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
                  <el-card shadow="hover">
                    <div class="flex items-center">
                      <el-icon icon="Phone" :size="25" class="mr-8px" />
                      <span class="text-16px">昨日交易金额（元）</span>
                    </div>
                    <div class="mt-16px text-20px text-red-400">{{ statDataMap['yesterdayTotal'] }}</div>
                  </el-card>
                </el-col>
                <el-col key="card-yesterday-success"
                        :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
                  <el-card shadow="hover">
                    <div class="flex items-center">
                      <el-icon icon="Phone" :size="25" class="mr-8px" />
                      <span class="text-16px">昨日成功金额（元）</span>
                    </div>
                    <div class="mt-16px text-20px text-red-400">{{ statDataMap['yesterdaySuccess'] }}</div>
                  </el-card>
                </el-col>
                <el-col key="card-yesterday-ratio"
                        :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
                  <el-card shadow="hover">
                    <div class="flex items-center">
                      <el-icon icon="Phone" :size="25" class="mr-8px" />
                      <span class="text-16px">昨日成功比例（%）</span>
                    </div>
                    <div class="mt-16px text-20px text-red-400">{{ statDataMap['yesterdaySuccRatio'] }}</div>
                  </el-card>
                </el-col>
              </el-row>
            </el-skeleton>
          </el-card>

          <el-card shadow="never" class="mt-8px">
            <el-row :gutter="20" justify="space-between">
              <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
                <el-card shadow="hover" class="mb-8px">
                  <el-descriptions
                    class="margin-top"
                    title="系统信息"
                    :column="3"
                    border
                  >
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">
                          <el-icon>
                            <location />
                          </el-icon>
                          域名
                        </div>
                      </template>
                      {{configForm.domainUrl}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">
                          <el-icon>
                            <iphone />
                          </el-icon>
                          客服飞机号
                        </div>
                      </template>
                      {{configForm.customerServiceTelegram}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">
                          <el-icon>
                            <user />
                          </el-icon>
                          客服QQ
                        </div>
                      </template>
                      {{configForm.customerServiceQq}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">
                          <el-icon>
                            <tickets />
                          </el-icon>
                          下发钱包地址
                        </div>
                      </template>
                      {{configForm.withdrawalWallet}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">
                          <el-icon>
                            <office-building />
                          </el-icon>
                          充值钱包地址
                        </div>
                      </template>
                      {{configForm.rechargeWallet}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">
                          <el-icon>
                            <user />
                          </el-icon>
                          在线客服URL
                        </div>
                      </template>
                      <el-link :href="configForm.customerServiceUrl" type="primary" target="_blank">点击访问</el-link>
                    </el-descriptions-item>
                  </el-descriptions>
                </el-card>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-8px">
          <el-card shadow="never">
            <template #header>
              <div class="h-3 flex justify-between">
                <span>系统通知</span>
              </div>
            </template>
            <el-skeleton :loading="loading" animated>
              <div v-for="(item, index) in noticeList" :key="`dynamics-${index}`">
                <div class="flex items-center">
                  <el-avatar :src="avatar" :size="35" class="mr-16px">
                    <img src="@/assets/imgs/avatar.gif" alt="" />
                  </el-avatar>
                  <div>
                    <div class="text-14px">
                      <el-link @click="noticeView(item)">通知 : {{ item.noticeTitle }}</el-link>
                    </div>
                    <div class="mt-16px text-12px text-gray-400">
                      {{ item.createTime }}
                    </div>
                  </div>
                </div>
                <el-divider />
              </div>
            </el-skeleton>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <!-- 添加或修改公告对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="480px" append-to-body>
      <el-form ref="noticeFormRef" label-width="80px">
        <el-row>
          <el-col :span="12">
              {{ selectedRow.createTime }}
          </el-col>
          <el-col :span="24">
            {{selectedRow.noticeContent}}
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { initWebSocket } from '@/utils/websocket';
import {listBizConfig} from "@/api/retail/bizConfig";
import {initSpeech, handleSpeak, setSpeechSwitch, setSpeechVolume} from '@/utils/speech';
import { useUserStore } from '@/store/modules/user'
import { getStatData } from '@/api/home'
import type { WorkplaceTotal, Notice } from './types'
import {listNotice} from "@/api/system/notice";
import {NoticeQuery, NoticeVO} from "@/api/system/notice/types";

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_notice_status, sys_notice_type } = toRefs<any>(proxy?.useDict("sys_notice_status", "sys_notice_type"));

const userStore = useUserStore()
const loading = ref(true)
const avatar = userStore.avatar
const username = userStore.nickname
const statDataMap = ref({});
const isSpeech = ref(true);
const volumeSize = ref<number>(9);
const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});
const configForm = ref({
  domainUrl: '',
  customerServiceTelegram: '',
  customerServiceQq: '',
  withdrawalWallet: '',
  rechargeWallet: '',
  customerServiceWx: '',
  customerServiceUrl: ''
});
const selectedRow = ref<NoticeVO>({
  noticeId: 0,
  noticeTitle: '',
  noticeType: '',
  noticeContent: '',
  status: '',
  remark: '',
  createByName: ''
});
// 获取统计数
let totalSate = reactive<WorkplaceTotal>({
  project: 0,
  access: 0,
  todo: 0
})

const getCount = async () => {
  const data = {
    project: 40,
    access: 2340,
    todo: 10
  }
  totalSate = Object.assign(totalSate, data)
}

// 获取通知公告
const noticeList = ref<NoticeVO[]>([]);
const getNotice = async () => {
  let params = ref<NoticeQuery|undefined>();
  listNotice(params).then(res => {
    noticeList.value = res.rows;
  })
}
const noticeView = (row?:NoticeVO)=> {
  dialog.visible = true;
  dialog.title = row?.noticeTitle;
  selectedRow.value = Object.assign(selectedRow.value,row);
}
const getAllApi = async () => {
  // 统计数据
  const statData = getStatData();
  statData.then(res => {
    statDataMap.value = res.data;
  })

  await Promise.all([
    getCount(),
    getNotice(),
    //统计数据
  ])
  loading.value = false
}

const handleSpeakSwitch = (flag: boolean) => {
  isSpeech.value = flag;
  setSpeechSwitch(isSpeech.value);
}

const handleSpeakVolume = (volumeSize: number) => {
  setSpeechVolume(volumeSize);
}

const getAllConfigs = () => {
  listBizConfig().then(res=>{
    Object.assign(configForm.value,res.data)
  });
}

onMounted( () => {
  getAllApi();
  //speech語音
  initSpeech();
  getAllConfigs();
  //websocket
  let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://'
  initWebSocket(protocol + window.location.host + import.meta.env.VITE_APP_BASE_API + "/resource/websocket");
  //echart
  /**
  const div: any = document.getElementById('indexEchart');
  let indexEchart = echarts.init(div);
  // 绘制图表
  indexEchart.setOption({
    title: {
      text: '支付方式統計'
    },
    tooltip: {},
    xAxis: {
      data: ['支付宝扫码', '微信扫码', '咸鱼收款码', '通联收款码', '开店宝收款码', '拼多多收款码']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  });
    **/
})
</script>
